<template>
    <!-- 安全责任指标个人考核 -->
    <base-breadcrumb>
        <searchData :searchData="searchOptions" :refreshCom="true" @search="handleSearch" />
        <div class="page-body">
            <a-card :bordered="false">
                <title-name title="安全责任指标考核-个人考核" />
                <div class="table-operateors mb20">
                    <a-button type="primary" @click="handleUpdate('add')">维护自己的工作项</a-button>
                </div>
                <s-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                    showPagination="auto"
                >
                    <!-- <template slot="auditStatusEnum" slot-scope="text, record">
            <StatusDisplay :status-code="record.auditStatusEnum" />
          </template> -->
                    <span slot="auditStatusEnum" slot-scope="text, record">
                        <list-status :status="record.auditStatusEnum" conversion="en" :text="text"></list-status>
                    </span>
                    <template slot="operator" slot-scope="text, record">
                        <a class="base-btn" @click="handleUpdate('look', record)">查看</a>
                        <a-divider type="vertical"  v-if="record.auditStatusEnum == 'DRAFT' || record.auditStatusEnum == 'REJECTED' || record.auditStatusEnum == 'PAST' " />
                        <a
                            class="base-btn"
                            @click="handleUpdate('edit', record)"
                            v-if="record.auditStatusEnum == 'DRAFT' || record.auditStatusEnum == 'REJECTED' || record.auditStatusEnum == 'PAST' "
                            >编辑</a
                        >
                        <a-divider
                            v-if="record.auditStatusEnum && record.auditStatusEnum !== 'DRAFT'"
                            type="vertical"
                            v-btnPermission="'hse_016_moi_09'"
                        />
                        <a
                            v-if="record.auditStatusEnum && record.auditStatusEnum !== 'DRAFT'"
                            @click="toggleApprovalDetails(record)"
                            v-btnPermission="'hse_016_moi_09'"
                            >审批信息</a
                        >
                    </template>
                </s-table>
            </a-card>
        </div>
        <ApprovalDetails
            :visible="visible.approvalDetails"
            :businessId="childInitData.id"
            @cancel="visible.approvalDetails = false"
            @confirm="visible.approvalDetails = false"
        />
    </base-breadcrumb>
</template>

<script>
import ApprovalDetails from '@/components/approvalDetails'
import TreeSelectJob from '@/components/TreeSelectOrganization/jobs.vue'
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import StatusDisplay from '@/components/StatusDisplay'
import { STable } from '@/components'
import { getPersonalExamList } from '@/api/safetySupervision/examRecord.js'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
const searchOptions = [
    // {
    //     name: '所属分公司',
    //     valueKey: 'branchComId',
    //     type: SelectSubCompany,
    // },
    {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
    // {
    //     name: '所属项目',
    //     keyValue: 'branchComId',
    //     valueKey: 'projectId',
    //     type: SelectProject,
    // },
    {
        name: '部门',
        valueKey: 'deptId',
        type: TreeSelectOrganization,
        childrenNode: 'jobs',
        allowClear: true,
    },
    {
        name: '岗位',
        valueKey: 'postId',
        type: TreeSelectJob,
        allowClear: true,
    },
    {
        name: '姓名',
        value: 'name',
        type: 'input',
    },
]

const columns = [
    {
        title: '姓名',
        dataIndex: 'employeeName',
    },
    {
        title: '岗位',
        dataIndex: 'jobName',
    },
    {
        title: '部门',
        dataIndex: 'deptName',
    },
    {
        title: '所属分公司',
        dataIndex: 'branchComName',
    },
    {
        title: '所属项目',
        dataIndex: 'projectName',
    },
    {
        title: '状态',
        dataIndex: 'auditStatusEnum',
        scopedSlots: { customRender: 'auditStatusEnum' },
    },
    {
        title: '操作',
        dataIndex: 'operator',
        scopedSlots: { customRender: 'operator' },
    },
]
export default {
    name:'a'+Date.now(),    components: {
        STable,
        StatusDisplay,
        ApprovalDetails,
    },
    data() {
        return {
            childInitData: {},
            visible: {
                approvalDetails: false,
            },
            searchOptions: searchOptions,
            columns: columns,
            queryParam: {},
            loadData: async (parameter) => {
                const requestParameters = Object.assign({}, parameter, this.queryParam)
                const [err, res] = await getPersonalExamList(requestParameters)
                return new Promise((resolve, reject) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(res)
                    }
                })
            },
        }
    },
    methods: {
        toggleApprovalDetails(data) {
            this.childInitData = { ...data }
            this.visible.approvalDetails = true
        },
        handleSearch(val) {
            this.queryParam = val
            this.$refs.table.refresh(true)
        },
        handleUpdate(type, data = {}) {
            this.$router.push({
                name: 'UpdatePersonalWorkItem', // 维护页面只能由自己进入（后面需要完善相应限制）
                query: {
                    pageType: type,
                    id: data.id || '',
                },
            })
        },
    },
}
</script>

<style lang="less" scoped>
.page-header {
    .header-row {
        display: flex;
        .flex-content {
            flex: auto;
        }
        .divider {
            margin: 0 12px;
        }
        .expand-btn {
            margin-left: 8px;
            font-size: 14px;
        }
    }
}
.page-body {
    .table-operateors {
        .ant-btn + .ant-btn {
            margin-left: 12px;
        }
    }
}
</style>
